import 'package:flutter/material.dart';
import 'package:kq_flutter_core_widget/utils/kq_screen_util.dart';
import 'package:kq_flutter_core_widget/widgets/image/kq_image.dart';
import '../../config/kq_global.dart';
import '../../resources/kq_images.dart';
import '../../resources/kq_theme_colors.dart';
import '../divider/kq_divider.dart';

const double _kItemSidePadding = 5;

/// 描述: 横向步骤条,是一种常见的导航形式，它具有导航通用的属性：告知用户”我在哪/我能去哪“，
/// 步骤数目就相当于告知用户--能去哪或者说流程将要经历什么。
/// 通用组件步骤条分为三个状态：完成态/进行态/等待态，三种状态在样式上均加以区分
/// 注意事项：横向步骤条内的步骤总数最多只支持5个
class KqHorizontalSteps extends StatefulWidget {
  /// The steps of the stepper whose titles, subtitles, icons always get shown.
  ///
  //当前这个板块的高
  final double? height;

  /// 控制类
  final KqStepsController? controller;

  /// 自定义正在进行状态的icon
  final Widget? doingIcon;

  /// 自定义已完成状态的icon
  final Widget? completedIcon;

  //点击了每个块
  final Function(int index, KqStep step)? callBack;

  KqHorizontalSteps(
      {Key? key,
      this.height,
      required this.controller,
      this.doingIcon,
      this.completedIcon,
      this.callBack})
      : assert(controller!.steps.length < 6),
        super(key: key);

  @override
  State<StatefulWidget> createState() => KqHorizontalStepsState();
}

class KqHorizontalStepsState extends State<KqHorizontalSteps> {
  Color? get _primary {
    return KqThemeColors.textLightBlue;
  }

  int get _currentIndex {
    return widget.controller?.currentIndex ?? 0;
  }

  Color _getStepContentTextColor(int index) {
    return KqThemeColors.text26;
  }

  void _handleStepStateListenerTick() {
    setState(() {});
  }

  void _initController() {
    widget.controller?._setMaxCount(widget.controller!.steps.length);
    widget.controller?.addListener(_handleStepStateListenerTick);
  }

  @override
  void initState() {
    super.initState();
    _initController();
  }

  @override
  void dispose() {
    widget.controller?.removeListener(_handleStepStateListenerTick);
    super.dispose();
  }

  @override
  void didUpdateWidget(covariant KqHorizontalSteps oldWidget) {
    super.didUpdateWidget(oldWidget);
    final bool isControllerDiff = oldWidget.controller != null &&
        widget.controller != oldWidget.controller;
    final bool isCountDiff =
        widget.controller!.steps.length != oldWidget.controller!.steps.length;
    if (isControllerDiff || isCountDiff) {
      oldWidget.controller?.removeListener(_handleStepStateListenerTick);
      _initController();
    }
  }

  @override
  Widget build(BuildContext context) {
    /// 单独一个widget组件，用于返回需要生成的内容widget
    Widget content;
    final List<Widget> childrenList = <Widget>[];
    final List<KqStep> steps = widget.controller!.steps;
    final int length = steps.length;
    for (int i = 0; i < length; i += 1) {
      childrenList.add(_applyStepItem(steps[i], i));
    }
    content = SizedBox(
      height: widget.height ?? 120.r,
      child: Row(
        mainAxisSize: MainAxisSize.max,
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: childrenList,
      ),
    );
    return content;
  }

  Widget _applyStepItem(KqStep step, int index) {
    return Expanded(
      child: InkWell(
        onTap: () {
          if (widget.callBack != null) {
            widget.callBack!(index, step);
          }
        },
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            _applyStepAndLine(step, index),
            _applyStepContent(step, index),
          ],
        ),
      ),
    );
  }

  Widget _applyStepAndLine(KqStep step, int index) {
    return Row(
      crossAxisAlignment: CrossAxisAlignment.center,
      children: [
        index == 0
            ? const Expanded(child: SizedBox.shrink())
            : _applyLineItem(index, true),
        _applyStepIcon(step, index),
        index == widget.controller!.steps.length - 1
            ? const Expanded(child: SizedBox.shrink())
            : _applyLineItem(index, false),
      ],
    );
  }

  Widget _applyStepIcon(KqStep step, int index) {
    Widget icon;
    if (widget.controller?.isCompleted == true) {
      return _getCompletedIcon(step);
    }
    if (step.state != null) {
      switch (step.state) {
        case KqStepState.indexed:
          icon = _getIndexIcon(step, index);
          break;
        case KqStepState.complete:
          icon = _getCompletedIcon(step);
          break;
        case KqStepState.doing:
          icon = _getDoingIcon(step);
          break;
        default:
          icon = _getDoingIcon(step);
          break;
      }
    } else {
      if (index < _currentIndex) {
        // 当前index小于指定的活跃index
        icon = _getCompletedIcon(step);
      } else if (index == _currentIndex) {
        icon = _getDoingIcon(step);
      } else {
        icon = _getIndexIcon(step, index);
      }
    }
    return icon;
  }

  Widget _applyLineItem(int index, bool isLeft) {
    return Expanded(
      child: Container(
          alignment: Alignment.center,
          child: KqDivider(
            height: 1,
            color: _getLineColor(index, isLeft),
            leftMargin: isLeft ? 0 : _kItemSidePadding,
            rightMargin: isLeft ? _kItemSidePadding : 0,
          )),
    );
  }

  Color _getLineColor(int index, bool isLeft) {
    if (index < _currentIndex) {
      return _primary!;
    } else if (_currentIndex == index && isLeft) {
      return _primary!;
    }
    return const Color(0xffD9D9D9);
  }

  Widget _getIndexIcon(KqStep step, int index) {
    Widget? indexedIcon = step.indexedIcon;
    if (indexedIcon != null) {
      return indexedIcon;
    }
    Widget icon = KqImage.assets(
      fit: BoxFit.cover,
      url: KqImages.commonIcRadioUnselected,
      package: KqGlobal.packageName,
      height: 28.r,
      width: 28.r,
    );
    return icon;
  }

  Widget _applyStepContent(KqStep step, int index) {
    Widget? stepContent = step.stepContent;
    if (stepContent != null) {
      return stepContent;
    }
    return Container(
      margin: const EdgeInsets.only(
          top: 6, left: _kItemSidePadding, right: _kItemSidePadding),
      child: Text(
        step.stepContentText ?? '',
        maxLines: 1,
        overflow: TextOverflow.ellipsis,
        style: TextStyle(
          fontSize: 20.sp,
          color: _getStepContentTextColor(index),
        ),
      ),
    );
  }

  Widget _getCompletedIcon(KqStep step) {
    Widget? completedIcon = step.completedIcon;
    if (completedIcon != null) {
      /// 如果Step中自定义completedIcon不为空，则使用自定义的icon
      return completedIcon;
    }
    completedIcon = widget.completedIcon;
    if (completedIcon != null) {
      /// 如果自定义completedIcon不为空，则使用自定义的icon
      return completedIcon;
    }

    /// 使用组件默认的icon
    return KqImage.assets(
      url: KqImages.commonIcRadioSelected,
      package: KqGlobal.packageName,
      width: 28.r,
      height: 28.r,
    );
  }

  Widget _getDoingIcon(KqStep step) {
    Widget? doingIcon = step.doingIcon;
    if (doingIcon != null) {
      /// 如果Step中自定义doingIcon不为空，则使用自定义的icon
      return doingIcon;
    }
    doingIcon = widget.doingIcon;
    if (doingIcon != null) {
      /// 如果自定义doingIcon不为空，则使用自定义的icon
      return doingIcon;
    }
    // 使用组件默认的icon
    return KqImage.assets(
      url: KqImages.commonIcRadioSelected,
      package: KqGlobal.packageName,
      width: 28.r,
      height: 28.r,
    );
  }
}

enum KqStepState {
  /// A step that displays its index in its circle.
  indexed,

  /// A step that displays a doing icon in its circle.
  doing,

  /// A step that displays a completed icon in its circle.
  complete
}

class KqStep {
  /// Creates a step for a [Stepper].
  ///
  /// The [stepContent], [doingIcon] arguments can be null.
  const KqStep({
    this.stepContent,
    this.indexedIcon,
    this.doingIcon,
    this.stepContentText,
    this.completedIcon,
    this.state,
    this.extraData,
  });

  /// The String title of the step that typically describes it.
  final String? stepContentText;

  /// The title of the step that typically describes it.
  final Widget? stepContent;

  ///  The completedIcon of the step
  final Widget? indexedIcon;

  /// The doingIcon of the step
  final Widget? doingIcon;

  /// The completedIcon of the step
  final Widget? completedIcon;

  /// The state of the step which determines the styling of its components
  /// and whether steps are interactive.
  final KqStepState? state;

  /// 自定义内容，备用
  final dynamic extraData;
}

class KqStepsController with ChangeNotifier {
  /// 指示当前进行态的步骤
  int currentIndex;

  /// 整个流程是否完成
  bool isCompleted;

  /// 最大个数（最多只支持5个）
  int _maxCount = 0;

  /// 步骤条中元素的列表
  late List<KqStep> steps;

  KqStepsController(
      {this.currentIndex = 0, this.isCompleted = false, required this.steps});

  /// 只有在当前包内调用，不开放给外部调用
  void _setMaxCount(int _maxCount) {
    this._maxCount = _maxCount;
  }

  /// 设置当前步骤条的 index,从 0 开始。
  void setCurrentIndex(int currentIndex) {
    if (this.currentIndex == currentIndex || currentIndex > _maxCount) return;
    isCompleted = currentIndex == _maxCount;
    this.currentIndex = currentIndex;
    notifyListeners();
  }

  /// 整个链路完成
  void setCompleted() {
    setCurrentIndex(_maxCount);
  }

  /// 向前一步
  void forwardStep() {
    if (currentIndex < _maxCount) {
      setCurrentIndex(currentIndex + 1);
    }
  }

  /// 向后一步
  void backStep() {
    final int backIndex = currentIndex <= 0 ? 0 : currentIndex - 1;
    setCurrentIndex(backIndex);
  }

  //赋值数据
  void setUpdate(List<KqStep> kqSteps) {
    steps = kqSteps;
    _setMaxCount(steps.length);
  }
}
